<template>
	<view class="homePage">
		<view class="headerContainer">
			<view class="header"></view>
			<view class="top">
				<view class="box">
					<view class="imgInfo">
						<image class="touxiang" src="/static/logo.png" alt="" />
						<image src="/static/logo.png" alt="" />
						<image src="/static/logo.png" alt="" />
						<image src="/static/logo.png" alt="" />
					</view>
					<view class="contentInfo">

					</view>
				</view>
				<view class="box">
					<view class="imgInfo">
						<image class="touxiang" src="/static/logo.png" alt="" />
						<image src="/static/logo.png" alt="" />
						<image src="/static/logo.png" alt="" />
						<image src="/static/logo.png" alt="" />
					</view>
					<view class="contentInfo">
				
					</view>
				</view>
				<view class="box">
					<view class="imgInfo">
						<image class="touxiang" src="/static/logo.png" alt="" />
						<image src="/static/logo.png" alt="" />
						<image src="/static/logo.png" alt="" />
						<image src="/static/logo.png" alt="" />
					</view>
					<view class="contentInfo">
				
					</view>
				</view>
				<view class="box">
					<view class="imgInfo">
						<image class="touxiang" src="/static/logo.png" alt="" />
						<image src="/static/logo.png" alt="" />
						<image src="/static/logo.png" alt="" />
						<image src="/static/logo.png" alt="" />
					</view>
					<view class="contentInfo">
				
					</view>
				</view>
			</view>
			<view class="action"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="less">
	.homePage {
		.headerContainer {
			padding: 30rpx;
			height: 700rpx;
			background-color: #ffc334;
			border-bottom-left-radius: 30rpx;
			border-bottom-right-radius: 30rpx;

			.header {
				height: 155rpx;
				background-color: rebeccapurple;
			}

			.top,
			.action {
				background-color: #fff;
				border-radius: 20rpx;
			}

			.top {
				display: grid;
				height: 450rpx;
				margin: 15rpx 0;
				grid-template-columns: 1fr 1fr;
				grid-template-rows: 1fr 1fr;
				overflow: hidden;

				.box {
					width: 100%;
					height: 100%;
					border-right: 1rpx dashed #919191;
					border-bottom: 1rpx dashed #919191;

					display: grid;
					grid-template-columns: 1fr 3fr;

					.imgInfo,
					.contentInfo {
						width: 100%;
						height: 100%;
					}

					.imgInfo {

						.touxiang {
							margin: 20rpx auto;
							width: 60rpx;
							height:60rpx;
							border-radius: 50%;
						}

						image {
							margin: 10rpx auto;
							width: 25rpx;
							height: 25rpx;
							display: block;
						}
					}

					.contentInfo {
					}
				}
			}

			.action {
				height: 220rpx;
			}
		}
	}
</style>
